<template>

  <el-form ref="orderForm" :model="content" size="small" label-width="120px">
    <el-form-item label="订单号" prop="outerNo">
      <el-input v-model="content.outerNo" />
    </el-form-item>
    <el-form-item label="类型">
      <el-radio-group v-model="content.serviceType" size="small">
        <el-radio-button label="0">带设计</el-radio-button>
        <el-radio-button label="1">代加工</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="设计软件">
      <el-radio-group v-model="content.designTool" size="small">
        <el-radio-button label="不限" />
        <el-radio-button v-for="item in designTools" :key="item.id" :label="item.title" />
      </el-radio-group>

    </el-form-item>
    <el-form-item label="价格模板">
      <el-select v-model="content.priceTemplateId" size="small" placeholder="请选择">
        <el-option label="不使用模板" value="" />
        <el-option v-for="item in templates" :key="item.id" :label="item.title" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="选择牙位" style="text-align:center;">
      <tooth-position v-for="(item,index) in content.toothList" :ref="'pos'+index" :key="index" :position="content.toothList[index]" @remove="removePosition(index)" />
      <el-button type="primary" icon="el-icon-plus" size="small" circle @click="addPositon" />

    </el-form-item>
    <el-form-item label="数据类型">
      <el-radio-group v-model="content.dataType" size="small">
        <el-radio label="数据模型" />
        <el-radio label="口扫数据" />
      </el-radio-group>
      <el-upload
        :action="baseUrl+'api/Files'"
        :on-success="uploadSuccess"
        :before-upload="beforeUpload"
        :file-list="content.files"
      >
        <el-button size="small" type="primary">点击上传数据文件</el-button>
        <div slot="tip" class="el-upload__tip">上传文件或压缩包，最多上传5个文件，单个文件不超过100MB</div>
      </el-upload>
    </el-form-item>
    <el-form-item label="设计需求">
      <el-input v-model="content.requirement" size="small" type="textarea" />
      <el-upload
        :show-file-list="false"
        :action="baseUrl+'api/Files'"
        :on-success="uploadRequirdSuccess"
        :before-upload="beforeUpload"
      >
        <el-button size="small" type="primary">点击上传需求文件</el-button>
        <div slot="tip" class="el-upload__tip">填写设计需求照片或者上传设计要求</div>
      </el-upload>
    </el-form-item>

  </el-form>

</template>
<script>
import { getAllList } from '@/api/designTool'
import { getPriceTemplates } from '@/api/priceTemplate'
import toothPosition from './toothPosition.vue'
export default {
  components: {
    toothPosition
  },
  props: ['content'],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      designTools: [],
      templates: []
      // order: {
      //   'outerNo': '', // 外部单号
      //   serviceType: 0,
      //   'designTool': '不限', // 要求设计工具名称
      //   'priceTemplateId': '', // 价格模板Id，可空
      //   'toothList': [ // 牙位信息数组
      //     {
      //       'topLeft': '', //  左上
      //       'topRight': '', //  右上
      //       'bottomLeft': '', // 左下
      //       'bottomRight': '', // 右下
      //       'price': 0, // 单价
      //       'count': 0, // 数量
      //       'sumPrice': 0, // 小计
      //       'productId': '' // 产品Id, 必填
      //     }
      //   ],
      //   'price': 0, // 所有牙位价格总和
      //   'dataType': '数据模型', // 上传数据类型
      //   'files': [ // 上传文件地址数组
      //   ],
      //   'requirement': '', // 设计需求
      //   'requirementFile': '' // 设计需求文件地址
      // },
    }
  },
  created() {
    this.getTools()
  },
  methods: {
    getTools() { // 初始化设计工具
      getAllList().then(res => {
        this.designTools = res.data
      })
    },
    getTemplates() { // 初始化价格模板
      getPriceTemplates.then(res => {
        this.templates = res.data
        var tmp = this.templates.filtes(t => {
          return t.isDefault === true
        })
        if (tmp) {
          this.content.priceTemplateId = tmp.id
        }
      })
    },
    addPositon() { // 添加牙位
      const pos = {
        'topLeft': '', //  左上
        'topRight': '', //  右上
        'bottomLeft': '', // 左下
        'bottomRight': '', // 右下
        'price': 0, // 单价
        'count': 0, // 数量
        'sumPrice': 0, // 小计
        'productId': '' // 产品Id, 必填
      }
      this.content.toothList.push(pos)
    },
    removePosition(index) { // 移除牙位
      if (this.content.toothList.length === 1) {
        this.$message.error('已经是最后一个，不能再删了！')
        return
      }
      this.content.toothList.splice(index, 1)
    },
    // 上传数据文件
    uploadSuccess(res) { // 上传文件
      this.content.files.push(res.data)
    },
    uploadRequirdSuccess(res) { // 上传需求文件
      this.content.requirementFile = res.data.path
    },
    // 上传之前
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 100

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 100MB!')
      }
      return isLt2M
    },
    validate() { // 表单验证
      let res = true
      for (let i = 0; i < this.content.toothList.length; i++) {
        res = res && this.$refs['pos' + i][0].validate()
      }
      return res
      // const ps = []
      // for (let i = 0; i < this.content.toothList.length; i++) {
      //   const p = new Promise((resolve, reject) => {
      //     const fname = 'pos' + i
      //     this.$refs[fname][0].validate(valid => {
      //       if (valid) resolve()
      //       else { reject() }
      //     })
      //   })
      //   ps.push(p)
      // }
      // console.log(ps)
      // // Promise.all(ps).then(() => {
      // //   console.log('orderForm验证')
      // //   callback
      // // })
      // return ps
    }

  }
}
</script>

